在各家瀏覽器開始出現的時候，除了不同瀏覽器與 IE 各版本間的不相容需要使用 reset.css 或 normalize.css 來進行最初的調整之外，最讓人頭痛的還有在寫網頁的過程中會發生同一個元素的設定在各瀏覽器看起來卻有落差。

雖然 W3C 制定了標準化的 CSS 和 HTML 語法，但早期各瀏覽器的支援卻不相同，雖然隨著各瀏覽器版本的更新與支援度的增加，這種狀況越來越少，但是仍然是會發生，尤其在需要向下相容 IE 某些版本時...

而這些情形很容易發生在 form 表單內的元素如 input、textarea、上傳等，還有定位、偽元素的使用。為了要解決這些問題，於是產生了特殊的解決方法 -- CSS hack。

CSS Hack 在使用上還分為：

• Selector Hacks 在選擇器前加上 hack
• Property/Value Hacks 在屬性與值之後加上 hack
• Media Query Hacks 利用 media query 指定特定媒體

for IE

因為可以使用的太多種，僅就常用的來介紹。

.banner{
    color: #666\9; //for ie6、7、8
    color: #555\0; //for ie8
    +color: #444; //for ie7
    _color: #333; //for ie6
}


/*for ie9*/
:root .banner{ color: black\9;}

/*for ie10 、 ie11*/
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
    .banner{
        color: red;
    }
}

IE6~8 CSS hack 使用的方式就是 Property/Value Hacks，是在 css 加上只有那個版本會讀取的符號。
IE9 CSS hack 使用的方式就是 Selector Hacks。
IE10、11 CSS hack 使用的方式就是 Media Query Hacks。(就是上一篇所介紹過的 Media query)

for Chrome、safari、Opera>14

.banner:not(*:root) {
    color: blue;
}

for Firefox

_:-moz-tree-row(hover), .selector {
    color: yellow;
}

CSS hack 雖然可以解決問題，但是畢竟不符合 W3C 的規範，非必要的時候還是少用，其實目前主流瀏覽器已經不太容易出現太離譜的狀況，因此了解 html、css 的標準寫法就能寫出不易出現問題的網頁了。

以上是今天介紹的 CSS Hack，各位看倌明天見囉～

參考資料：
[1] IE6 - 11 - stackoverflow 討論串第 98則留言
[2] Browser Specific Hacks
[3] CSS-only Filters Summary
[4] 史上最全的css hack
[5] Browser Hacks